<script>
/**
 * @desc 在详情页点击'立即预约'后进入的表单填写页面
 */

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import BottomMenu from './order-bottom-menu'
import DateSelect from './date-select'
import PackageSelect from './package-select'
import ContactSelect from './contact-select'
import arrowIco from '@/assets/icons/arrow.png'

export default {
  name: 'create-order',
  components: { BottomMenu, DateSelect, PackageSelect, ContactSelect },
  data: () => ({
    arrowIco,

    showDateSelect: false,
    showPackageSelect: false,
    showContact: false
  }),
  computed: {
    ...mapState({
      travelDetail: state => state.Order.currTravelDetail,
      currDatePrice: state => state.Order.currDatePrice,
      travelDate: state => state.Order.travelDate,
      userTravelerId: state => state.Order.userTravelerId,
      travelers: state => state.SignIn.travelers,
      orderStore: state => state.Order
    }),
    ...mapGetters({ checkedPackages: 'Order/checkedPackages' }),
    travelerName() {
      return this.userTravelerId
        ? this.travelers.find(v => v.id === this.userTravelerId).name
        : '未选择'
    }
  },
  methods: {
    ...mapMutations('Order', { setOrder: 'setState' }),
    ...mapActions('Order', ['sendOrder']),

    handleToggleDateSelect(bool) {
      this.showDateSelect = bool
    },

    handleTogglePackageSelect(bool) {
      if (bool) {
        if (this.currDatePrice.id) {
          this.showPackageSelect = bool
        } else {
          wx.showModal({ title: '提示', content: '请先选择日期!', showCancel: false })
        }
      } else {
        this.showPackageSelect = bool
      }
    },

    handleToggleContact(bool) {
      this.showContact = bool
    },

    handleSubmit() {
      const {
        routeId,
        travelDate,
        singlePersonGroup,
        twoPeopleGroup,
        fourPeopleGroup,
        sixPeopleGroup,
        eightPeopleGroup,
        roomQuantity,
        orderAmount,
        userTravelerId
      } = this.orderStore
      if (routeId && orderAmount && userTravelerId) {
        wx.showLoading({ title: '正在下单...', mask: true })
        this.sendOrder({
          routeId,
          travelDate,
          singlePersonGroup,
          twoPeopleGroup,
          fourPeopleGroup,
          sixPeopleGroup,
          eightPeopleGroup,
          roomQuantity,
          orderAmount,
          userTravelerId
        })
          .then(() => {
            wx.hideLoading()
            // 先跳到'个人',再进入'订单'页面
            wx.switchTab({
              url: '/pages/account/main',
              success: () => {
                const t = setTimeout(() => {
                  clearTimeout(t)
                  wx.navigateTo({
                    url: '/pages/my-orders/main'
                  })
                }, 500)
              }
            })
          })
          .catch(err => {
            wx.hideLoading()
            wx.showModal({ title: '错误', content: err, showCancel: false })
          })
      } else {
        wx.showModal({ title: '提示', content: '请先完成表单', showCancel: false })
      }
    }
  },
  onUnload() {
    this.showDateSelect = false
    this.showPackageSelect = false
    this.showContact = false
    // 清除选择的日期
    this.setOrder({
      currDatePrice: {},
      routeId: '',
      travelDate: '',
      singlePersonGroup: 0,
      twoPeopleGroup: 0,
      fourPeopleGroup: 0,
      sixPeopleGroup: 0,
      eightPeopleGroup: 0,
      roomQuantity: 0,
      orderAmount: 0,
      userTravelerId: ''
    })
  }
}
</script>

<template>
  <div class="create-order">
    <div class="form-container">
      <div class="travel-info">
        <img
          v-if="travelDetail.picture"
          :src="'https://source.hilval.com'+travelDetail.picture"
          class="preview"
          mode="aspectFill"
        />
        <div class="info">
          <p class="name">{{travelDetail.name}}</p>
          <p class="sub-title">{{travelDetail.labelList[0]}}</p>
        </div>
      </div>

      <div class="select-item" @click="handleToggleDateSelect(true)">
        <span class="title">出行日期</span>
        <span class="val">{{travelDate?travelDate:'未选择'}}</span>
        <img :src="arrowIco" class="arrow-icon">
      </div>
      <div class="select-item" @click="handleTogglePackageSelect(true)">
        <span class="title">套餐</span>
        <span class="val"></span>
        <img :src="arrowIco" class="arrow-icon">
      </div>

      <!-- checked packages -->
      <div class="checked-packages" v-if="checkedPackages.length">
        <p class="checked-package-item" v-for="(v,i) in checkedPackages" :key="i">
          <span class="name">{{v.name}}</span>
          <span class="quantity">x{{v.quantity}}</span>
          <span class="price">{{v.price}}</span>
        </p>
      </div>

      <div class="select-item" @click="handleToggleContact(true)">
        <span class="title">联系人</span>
        <span class="val">{{travelerName}}</span>
        <img :src="arrowIco" class="arrow-icon">
      </div>

    </div>
    <bottom-menu :handleSubmit="handleSubmit" />

    <!-- 选择日期的 弹出层 -->
    <date-select
      :show="showDateSelect"
      :handleClose="()=>handleToggleDateSelect(false)"
    />
    
    <!-- 套餐 -->
    <package-select
      :show="showPackageSelect"
      :data="travelDetail"
      :handleClose="()=>handleTogglePackageSelect(false)"
    />
    
    <!-- 联系人 -->
    <contact-select
      :show="showContact"
      :handleClose="()=>handleToggleContact(false)"
    />
  </div>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
